<template>
  <div class="page">
    <el-button type="primary" @click="handleChangeTabName">更改当前页签名称</el-button>
    <el-button type="primary" @click="handleDeleteRuleCache">删除规则设置页面缓存</el-button>
    <el-button type="primary" @click="handleDeleteRuleTabs">删除规则设置页签</el-button>
  </div>
</template>

<script setup>
  import { getCurrentInstance } from 'vue'

  defineOptions({
    name: 'home'
  })

  // 初始化操作
  const { appContext } = getCurrentInstance()
  const { config, $router, utils } = appContext.config.globalProperties

  // 切换当前页签名称
  let isFlag = $ref(true)
  const handleChangeTabName = () => {
      isFlag = !isFlag
      utils.setTabsName(isFlag ? '首页' : '变更后的名称')
  }

  // 删除规则设置页面缓存
  const handleDeleteRuleCache = () => {
      utils.dropCachePages(['rule-setting'])
  }

  // 删除规则设置页签
  const handleDeleteRuleTabs = () => {
      utils.dropTabsViewPages('rule-setting')
  }
</script>

<style scoped lang="scss"></style>